<template>
  <div class="ke-tab" @click="addStyleForSelectedTab($event)">
    <router-link :to="'/detailcourse/overview'" tag="span">课程概述</router-link>
    <router-link :to="'/detailcourse/catalogue'" tag="span">目录</router-link>
    <router-link :to="'/detailcourse/comment'" tag="span">评论</router-link>
  </div>
</template>

<script>
export default {
  name: 'ke-tab',
  methods: {
    addStyleForSelectedTab(e) {
      e.target.classList.toggle('active')
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-tab {
  overflow: hidden;

  span {
    border-bottom: 5px solid #fff;
    line-height: 50px;
    padding: 0 40px;
    font-size: 16px;
    float: left;
    cursor: pointer;

    &.active {
      border-bottom-color: rgb(35, 184, 255);
    }
  }
}
</style>
